<template>
    <Modal :mask-closable="false"
          :title="`${$t('common.BatchPrint')}`"
            width="800"
            v-model="printBatchVisible"
          class="modal-content-layout"
            @on-visible-change="handleChangeVisible"
    >
        <div style="margin: 10px">
            <Row>
                <Col :span="4" :offset="20">
                    <!-- v-print="'#equipmentsbatchprint'" -->
                    <Button type="primary" >{{$t('common.print')}}</Button>
                </Col>
            </Row>
        </div>
        <div ref="batchPrint" id="equipmentsbatchprint">
            <div style="page-break-after:always;display: flex;justify-content: center;align-items: center" v-for="item in batchPrintList" :key="item.id" >
                <section>
                    <table style="table-layout: fixed" border="1" width="100%" cellspacing="0" cellpadding="0">
                        <caption>
                            <h1 style="font-size: 30px">科森科技股份有限公司设备管理档案卡</h1>
                        </caption>
                        <tbody>
                        <tr>
                            <td align="center" width="12%" height="40">{{$t('maintenance.EquipmentName')}}</td>
                            <td align="center" width="38%" height="40">{{ item.deviceName }}</td>
                            <td align="center" width="12%" height="40">{{$t('maintenance.EquipmentNo')}}</td>
                            <td align="center" width="38%" height="40">{{ item.deviceMId }}</td>
                        </tr>
                        <tr>
                            <td align="center" width="12%" height="40">{{$t('ledger.EquipmentType')}}</td>
                            <td align="center" width="38%" height="40">{{ item.specification }}</td>
                            <td align="center" width="12%" height="40" >{{$t('maintenance.EquipmentType')}}</td>
                            <td align="center" width="38%" height="40">{{ item.categoryName }}</td>
                        </tr>
                        <tr>
                            <td align="center" width="12%" height="40">{{$t('equipmentscrapped.Location')}}</td>
                            <td align="center" width="38%" height="40">{{ item.orgName }}</td>
                            <td align="center" width="12%" height="40">{{$t('equipmentscrapped.AssetNo')}}</td>
                            <td align="center" width="38%" height="40">{{ item.assetsNo }}</td>
                        </tr>
                        <tr>
                            <td align="center" width="12%" height="40">{{$t('preliminary.UseEntity')}}</td>
                            <td align="center" width="38%" height="40">{{ item.useCompanyName }}</td>
                            <td align="center" colspan="2" rowspan="5">
                                <div id="batchQrcode" ref="batchQrcode"></div>
                            </td>
                        </tr>
                        <tr>
                            <td align="center" width="12%" height="40">{{$t('equipmentscrapped.CostCenter')}}</td>
                            <td align="center" width="38%" height="40">{{ item.costCenter }}</td>
                        </tr>
                        <tr>
                            <td align="center" width="12%" height="40"  >{{$t('ledger.DepreciationLife')}}</td>
                            <td align="center" width="38%" height="40">10年</td>
                        </tr>
                        <tr>
                            <td align="center" height="40">{{$t('preliminary.FinalAcceptanceTime')}}</td>
                            <td align="center" height="40">{{ item.final_accept_date }}</td>
                        </tr>
                        <tr>
                            <td align="center" height="40">{{$t('preliminary.factorydate')}}</td>
                            <td align="center" height="40">{{ item.arrivalAcceptDate }}</td>
                        </tr>
                        </tbody>
                    </table>
                </section>
            </div>
        </div>
      <div slot="footer"></div>
    </Modal>
</template>

<script>
    import QRCode from 'qrcodejs2'
    export default {
        name: "ledgerBatchPrintModal",
        data() {
            return {
                type: '',
                printBatchVisible: false,
                printObj: {},
                batchPrintList : []
            }
        },
        methods: {
            show(ids, type) {
                console.log(ids)
                this.type = type
                this.getDetail(ids)
                this.printBatchVisible = true
            },
            getDetail(ids) {
                if (this.type == 1) {
                    this.axios({
                        method: 'get',
                        url: '/dms/dmsDeviceTz/getBatchDevicePrint1',
                        params: {
                            ids: ids.toString()
                        }
                    }).then(res => {
                        
                        if(res.code === 200){
                            this.batchPrintList = res.data
                            this.createQRCode()
                        }else{
                            this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                        }
                    })
                }else {
                    this.axios({
                        method: 'get',
                        url: '/dms/dmsDeviceTz/getBatchDevicePrint',
                        params: {
                            ids: ids.toString()
                        }
                    }).then(res => {
                        
                        if(res.code === 200){
                            this.batchPrintList = res.data
                            this.createQRCode()
                        }else{
                            this.$Message.warning(({content:res.msg,duration:6,closable:true}));
                        }
                    })
                }

            },
            createQRCode() {
                console.log(this.batchPrintList)
                this.$nextTick(() => {
                    this.batchPrintList.forEach((item, index) => {
                        this.$refs.batchQrcode[index].innerHTML = ''; //清除二维码方法一
                        let text = item.deviceMId;
                        setTimeout(() => {
                            let qrcode = new QRCode(this.$refs.batchQrcode[index], {
                                text: text, //页面地址 ,如果页面需要参数传递请注意哈希模式#
                                width: 180,
                                height: 180,
                                colorDark: '#000000',
                                colorLight: '#ffffff',
                                correctLevel: QRCode.CorrectLevel.H,
                            })
                        }, 500)
                    })
                })

            },
            handleChangeVisible(status) {
                if (!status) {
                    this.$emit('handleChangeVisible')
                }
            }
        }
    }
</script>

<style scoped>
    @media print {
        tbody {page-break-after: always;}
    }
</style>
